{{extend "base.html"}}

{{block ext_style}}
    {{use "imageupload"}}
{{end}}

{{block body_tag}}
<body class="gray-bg">
{{end}}

{{block content}}

    <!--禁止弹出的model按任意键消失data-backdrop="static" data-keyboard="false"-->
    <div class="modal fade" style="display:none;" id="modalprofile" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div class="modal fade" style="display:none;" id="modalpassword" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


    <!--头像上传-->
    <div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1"  data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form class="avatar-form" action="/myuser/avatarupload" enctype="multipart/form-data" method="post">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal" type="button">&times;</button>
                        <h4 class="modal-title" id="avatar-modal-label">修改头像</h4>
                    </div>
                    <div class="modal-body">
                        <div class="avatar-body">
                            <div class="avatar-upload">
                                <input class="avatar-src" name="avatar_src" type="hidden">
                                <input class="avatar-data" name="avatar_data" type="hidden">
                                <label for="avatar_file">图片上传</label>
                                <input class="avatar-input" id="avatar_file" name="avatar_file" type="file"></div>
                            <div class="row">
                                <div class="col-md-9">
                                    <div class="avatar-wrapper"></div>
                                </div>
                                <div class="col-md-3">
                                    <div class="avatar-preview preview-lg"></div>
                                    <div class="avatar-preview preview-md"></div>
                                    <div class="avatar-preview preview-sm"></div>
                                </div>
                            </div>
                            <div class="row avatar-btns">
                                <div class="col-md-9">
                                    <div class="btn-group">
                                        <button class="btn" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees"><i class="fa fa-undo"></i> 向左旋转</button>
                                    </div>
                                    <div class="btn-group">
                                        <button class="btn" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees"><i class="fa fa-repeat"></i> 向右旋转</button>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <button class="btn btn-success btn-block avatar-save" type="submit"><i class="fa fa-save"></i> 保存修改</button>
                                </div>
                            </div>
                        </div>
                    </div>
            </form>
        </div>
      </div>
</div>


    <div class="wrapper wrapper-content">
        <div class="row animated fadeInRight">
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>个人资料</h5>
                    </div>
                    <div>
                        <div class="ibox-content no-padding border-left-right">
                            <div id="crop-avatar">
                                <div class="avatar-view" title="点我，更改头像">
                                {{if request.user.image:}}
                                    <img alt="头像丢失，点击更改" class="img-responsive" src="{{=request.user.image}}">
                                {{else:}}
                                    <img alt="头像丢失，点击更改" class="img-responsive" src="{{=url_for_static('img/profile.jpg')}}">
                                {{pass}}
                                </div>
                            </div>
                            
                        </div>
                        <div class="ibox-content profile-content">
                            <h4><strong>{{=request.user.nickname}}</strong></h4>
                            <h4>账号：{{=request.user.username}}</h4>
                            <h4>邮箱：{{=request.user.email}}</h4>
                            <h4>手机：{{=request.user.mobile}}</h4>
                            <p><i class="fa fa-map-marker"></i> 上海浦东新区东方路3601号丰华园8号楼4层</p>

                            <div class="well">
                            <h3>
                                    关于我
                                </h3> 我是打杂的小兵，天天扫地端茶。
                            </div>

                            <div class="user-button">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <a class="btn btn-primary btn-sm btn-block" id="myprofile" data-toggle="modal" href="javascript:void(0)" data-target="#modalprofile">
                                        <i class="fa fa-2x fa-user"></i> 修改个人信息</a>
                                    </div>
                                    <div class="col-sm-6">
                                        <a class="btn btn-danger btn-sm btn-block" id="mypassword" data-toggle="modal" href="javascript:void(0)" data-target="#modalpassword">
                                        <i class="fa fa-2x fa-user-secret"></i> 修改密码</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-8">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>最新消息</h5>
                    </div>
                    <div class="ibox-content">

                        <div>
                            <div class="feed-activity-list">
                            {{ for info in ormdata:}}
                                <div class="feed-element">
                                    <a href="profile.html#" class="pull-left">
                                    {{ if info.senduser_id.image_small:}}
                                        <img alt="image" class="img-circle" src="{{=info.senduser_id.image_small}}">
                                    {{else:}}
                                        <img alt="image" class="img-circle" src="{{=url_for_static('img/profile_small.jpg')}}">
                                    {{pass}}

                                    </a>
                                    <div class="media-body ">
                                        <small class="pull-right text-navy">{{=info.send_date}}</small>
                                        {{ if info.notify_type == 1: }}
                                            <strong>用户注册提示</strong>
                                        {{else:}}
                                            <strong>{{=info.senduser_id.nickname}}</strong>  发送给你
                                        {{pass}}
                                        <br>
                                        <div class="well">
                                            <h4>{{=info.content}}</h4>
                                        </div>
                                        <div class="actions">
                                        <a class="btn btn-xs btn-primary"><i class="fa fa-pencil"></i> 回复</a>
                                            <a class="btn btn-xs btn-danger"><i class="fa fa-heart"></i> 删除</a>
                                        </div>
                                    </div>
                                </div>
                            {{pass}}

                            </div>

                            <button class="btn btn-primary btn-block m"><i class="fa fa-arrow-down"></i> 显示更多</button>

                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>

{{end}}


{{block after_footer}}
    
    <script>
    
        var $myprofile = $('#myprofile');
        var $mypassword = $('#mypassword');


        $(function() {

            //每次加载modal清除之前的数据,modal的ajax缓存bug
            $('body').on('hidden.bs.modal', '.modal', function () {
                $(this).removeData('bs.modal');
            });

            //修改密码
            $mypassword.click(function(){
                var timestamp=Math.round(new Date().getTime()/1000);
                $mypassword.attr('href','/myuser/userprofilepassword?time=' + timestamp);
            });
            
            //修改个人信息
            $myprofile.click(function () {
                var timestamp=Math.round(new Date().getTime()/1000);
                $myprofile.attr('href','/myuser/userprofileedit?time=' + timestamp);

            });
        });
    </script>

{{end}}